<template>
<div class="huiyan">
	<themeHeader title="会员签到"></themeHeader>
	<img src="http://img05.yiguoimg.com/e/web/160418/00891/115828/qiandao_01.jpg">
	<h3>连续签到 第1天</h3>
	<ul class="hy-day">

		<img src="http://img05.yiguoimg.com/e/web/160418/00891/115828/qiandao_03.jpg">
		<li :class="item.class" v-for="(item,i) in dayItems"><img :src="item.url" >
		<span>{{item.day}}</span></li>
	</ul>
	<img src="http://img05.yiguoimg.com/e/web/160418/00891/115828/qiandao_04.jpg">
	<img src="http://img07.yiguoimg.com/e/web/160421/00891/154541/qiandao_05.jpg">
	<img src="http://img05.yiguoimg.com/e/web/160418/00892/152647/qiandao_06.jpg">
	<div class="coinnum">
		我的悠币:220
	</div>
</div>	
</div>
	

</template>
<style type="text/css">
	.huiyan{
		padding-top: 50px;
	}
	.huiyan>img,.hy-day>img{
		width: 100%;
	}
	.huiyan h3{
		text-align: center;
		font-size:.9rem;
		color: #3b9fb6;
		background: url("http://img05.yiguoimg.com/e/web/160418/00891/115828/qiandao_02.jpg") no-repeat;
		background-size: 100% 100%;
		padding: 0.5rem 0;
	}
	.hy-day{
		position: relative;
		width: 100%;
	}
	.hy-day>li{
		width: 11.56%;
		font-size: 0.6rem;
		color: #3b9fb6;
		text-align: center;
		position: absolute;

	}
	.circle1{
		top: 0%;
		left: 4.37%;
	}
	.circle2{
		top: 0%;
		left: 16.87%;
	}
	.circle3{
		top: 0%;
		left: 29.37%;
	}
	.circle4{
		top: 0%;
		left: 41.71%;
	}
	.circle5{
		top: 0%;
		left: 54%;
	}
	.circle6{
		top: 0%;
		left: 66.56%;
	}
	.circle7{
		top: 0%;
		left: 78.75%;
	}
	.circle8{
		top: 36.49%;
		right: 2.18%;
	}
	.circle9{
		top: 60.58%;
		left: 76.87%;
	}
	.circle10{
		top: 60.58%;
		left: 64.84%;
	}
	.circle11{
		top: 60.58%;
		left: 52.5%;
	}
	.circle12{
		top: 60.58%;
		left:40.15%;
	}
	.circle13{
		top: 60.58%;
		left: 27.96%;
	}
	.circle14{
		top: 60.58%;
		left: 15.62%;
	}
	.circle15{
		top: 52.55%;
		left: 3.05%;
	}
	.hy-day>li>img{
		width: 100%;
	}
	.coinnum{
		text-align: center;
		color: white;
		background: url(http://img05.yiguoimg.com/e/web/160418/00891/115828/qiandao_07.jpg) no-repeat;
		background-size: 100% 100%;
	}
	
</style>
<script type="text/javascript">
	import ThemeHeader from "./themeHeader.vue";
	export default{
		data(){
			return{
				dayItems:[
					{class:"circle1",url:"http://img06.yiguoimg.com/e/web/160418/00896/172241/coin_01on.png",day:"第1天"},
					{class:"circle2",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_02.png",day:"第2天"},
					{class:"circle3",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_03.png",day:"第3天"},
					{class:"circle4",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_04.png",day:"第4天"},
					{class:"circle5",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_05.png",day:"第5天"},
					{class:"circle6",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第6天"},
					{class:"circle7",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第7天"},
					{class:"circle8",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第8天"},
					{class:"circle9",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第9天"},
					{class:"circle10",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第10天"},
					{class:"circle11",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第11天"},
					{class:"circle12",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第12天"},
					{class:"circle13",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第13天"},
					{class:"circle14",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin_06.png",day:"第14天"},
					{class:"circle15",url:"http://img05.yiguoimg.com/e/web/160418/00891/115828/coin2.png",day:"第15天"},
				]
			}
		},
		components:{
			ThemeHeader,
		}
	}
</script>